<template>
    <div class="updateTask">
        <div class="input-box">
            <div class="input-label">具体工作内容</div>
            <div class="input-fill">
                <van-field style="background: rgba(242, 243, 245, 1)" disabled v-model="form.workContent" rows="2"
                    autosize type="textarea" placeholder="请填写" />
                <!-- <input type="text" v-model="form.workContent" disabled placeholder="请填写"> -->
                <!-- <el-input v-model="input" placeholder="请填写" /> -->
            </div>
        </div>
        <div class="input-box">
            <div class="input-label input-label-required">督办意见</div>
            <div class="input-fill">
                <van-field style="background: rgba(242, 243, 245, 1)" v-model="form.superviseComment" rows="2" autosize
                    type="textarea" placeholder="请填写" />
                <!-- <input type="text" v-model="form.superviseComment" placeholder="请填写"> -->
                <!-- <el-input v-model="input" placeholder="请填写" /> -->
            </div>
        </div>
        <div class="btn-list">
            <div class="cancel btn btnPointer" @click="router.go(-1)">取消</div>
            <div class="confirm btn btnPointer" @click="onSubmit()">提交</div>
            <!-- <div class="confirm btn btnPointer" @click="onSubmit">提交</div> -->
        </div>
    </div>
</template>

<script setup>
import { superviseAdd } from "@/service/yearWork"
import { useUser } from "@/stores/user"
const userStore = useUser()
const route = useRoute()
const router = useRouter()
const form = reactive({})
async function onSubmit() {
    try {
        let flag = form.superviseComment ? true : false
        if (!flag) {
            showToast("请填写督办意见");
            return
        }
        let reqParams = {
            superviseUserId: userStore.userInfo.userId,
            superviseUserName: userStore.userInfo.userName,
            superviseContent: form.superviseCommen,
            relatedWorkId: form.objectId,
        }
        let res = await superviseAdd(reqParams)
        if (res.code == 0) {
            showToast("督办成功");
            router.go(-1)
        }
    } catch (error) {
        console.log("🚀 ~ onSubmit ~ error:", error)

    }
}
onMounted(() => {
    Object.assign(form, JSON.parse(route.query.rowData))
})


</script>
<style></style>
<style lang="scss" scoped>
.updateTask {
    color: rgba(51, 51, 51, 1);
    padding: 0 26px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: calc(100vh - 92px - 10px);
    margin-top: 10px;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

}

.input-box {
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(239, 239, 239, 1);

    .input-label {
        font-size: 26px;
        margin: 5px 0;
        color: rgba(51, 51, 51, 1);
    }

    .input-label-required::before {
        content: "*";
        color: red;
    }

    .input-fill {
        input {
            width: 100%;
            font-size: 28px;
            padding: 0;
            border: none;
        }

        input::placeholder {
            color: #a8abb2;
        }

        input:disabled {
            // cursor: default;
            background-color: unset !important;
            color: #a8abb2;
        }

    }
}

.btn-list {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 40px 0;

    .cancel {
        width: 144px;
        height: 76px;
        opacity: 1;
        border-radius: 50px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(221, 221, 221, 1);
        font-size: 28px;
        color: rgba(166, 166, 166, 1);
    }

    .confirm {
        margin-left: 24px;
        width: 200px;
        height: 76px;
        border-radius: 50px;
        background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>